<template>
    <div class="box">
        <!-- 头部区域 -->
        <NavHeader />
        <!-- 内容区域 -->
        <div class="home-content">
            <div class="carousel">
                <el-carousel height="500px">
                    <el-carousel-item v-for="item in itemListPhotos" :key="item.id">
                        <div style="{height: 500px ; width: 100%;}">
                            <img
                                style="{height: 100%; width: 100%;}"
                                :src="servicePort + item.url"
                                :alt="item.alt"
                            />
                        </div>
                    </el-carousel-item>
                </el-carousel>

                <ul class="nav-list" ref="navUl">
                    <li v-for="item in navlist" :key="item.id" @click="search(item.text)">
                        <span :class="[item.icon, 'iconfont']"></span>
                        <span class="text">{{ item.text }}</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="banner-box">
            <el-card>
                <h1 class="title">服务推荐</h1>

                <div class="item-box">
                    <div
                        class="item"
                        v-for="item in itemListServices"
                        :key="item.id"
                        @click="gotoDetail(item.id)"
                    >
                        <img
                            v-if="item.photos[0]?.url"
                            :src="servicePort + item.photos[0]?.url"
                            :alt="item.alt"
                        />
                        <img
                            v-else
                            :src="servicePort + '/vehicle/default_img.png'"
                            :alt="item.alt"
                        />

                        <div class="topic">
                            <h4 class="description">
                                <el-tooltip :content="item.description" placement="top">
                                    {{ item.description }}
                                </el-tooltip>
                            </h4>
                            <div class="service_point">
                                <el-tooltip :content="item.service_point" placement="top">
                                    服务点： {{ item.service_point }}
                                </el-tooltip>
                            </div>
                            <p>
                                原价：<span class="origin-pric">{{
                                    (item.money + 20).toFixed(2)
                                }}</span
                                >&nbsp; 活动价：<span class="pric"
                                    >￥{{ item.money.toFixed(2) }}</span
                                >
                            </p>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { servicePort } from '@/request'
import { useNavList } from '../../store/index'
import message from '../../utils/message'
import { getRecommendList } from '../../api/home'

const { navlist } = useNavList()
const router = useRouter()

// 推荐服务照片
const itemListPhotos = ref([])
// 推荐服务
const itemListServices = ref([])
// 获取服务信息
const getList = async () => {
    const res = await getRecommendList()
    if (res.status !== 200) return message.error('获取数据失败')
    itemListPhotos.value = res.data.recommendsPhotos
    itemListServices.value = res.data.recommendsServices
}
getList()

const gotoDetail = (shopId) => {
    router.push({
        path: `/detail/${shopId}`
    })
}

const search = (text) => {
    router.push({
        path: `/search`,
        query: {
            keywords: text
        }
    })
}
</script>

<style lang="scss" scoped>
.box {
    .home-content {
        width: 100%;
        border: 1px solid #ccc;
        position: relative;
        background-color: #f5f5f5;
        border-bottom: 1px solid transparent;

        .carousel {
            height: 500px;
            width: 100%;
            position: relative;

            .nav-list {
                position: absolute;
                display: inline-block;
                height: 100%;
                width: 230px;
                background-color: rgba(0, 0, 0, 0.55);
                top: 0;
                left: 400px;
                z-index: 4;

                li {
                    height: 50px;
                    line-height: 50px;
                    font-size: 18px;
                    color: #fff;
                    cursor: pointer;
                    padding-left: 12px;

                    .text {
                        margin-left: 10px;
                    }

                    &:hover {
                        background-color: #e1e1e1;
                    }
                }
            }
        }
    }

    .banner-box {
        width: 1200px;
        margin: 30px auto;

        .title {
            margin: 0 15px 15px 15px;
        }

        .item-box {
            height: 350px;
            width: 100%;
            display: flex;

            .item {
                height: 340px;
                width: 100%;
                border: 1px solid #eee;
                border-radius: 5px;
                box-shadow:
                    -2px -2px 2px #eee,
                    2px 2px 2px #eee;
                margin-right: 10px;
                padding: 5px 5px;
                cursor: pointer;

                img {
                    width: 240px;
                    height: 240px;
                }

                .topic {
                    width: 200px;
                    margin: 10px auto;

                    h4 {
                        line-height: 1.5;
                    }
                    .service_point {
                        font-size: 12px;
                        color: #88888888;
                        margin-top: 10px;
                    }

                    .description {
                        overflow: hidden;
                        text-wrap: nowrap;
                        text-overflow: ellipsis;
                    }

                    p {
                        font-size: 12px;
                        color: #88888888;

                        .origin-pric {
                            text-decoration: line-through;
                        }

                        .pric {
                            color: #ff0036;
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}
</style>
